<template>
  <div class="history-page">
    <div class="history-top">
      <div style="display: flex; align-items: center">
        <img :src="topIcon" alt="img" style="margin-right: 8px;width: 26px;" />
        <span style="font-size: 22px;font-weight: bold;color: black;">
          历史数据<span>{{ total }}条</span>
        </span>
      </div>
      <el-button type="primary" size="mini" style="width: 80px;" @click="onBack">返回</el-button>
    </div>
    <div class="table-content" ref="tableRef">
      <el-table
        :data="tableData"
        size="small"
        style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
        :height="tableHeight"
        :header-cell-style="headerRowStyle"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column prop="industryType" align="center" label="产业类型" width="100">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" align="center" width="100">
        </el-table-column>
        <el-table-column prop="projectBody" label="项目主体" align="center" width="100">
        </el-table-column>
        <el-table-column prop="companyProfile" label="公司简介" align="center" width="55">
        </el-table-column>
        <el-table-column
          prop="intentionallyLoaded"
          label="意向承载地"
          align="center"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="totalMoney"
          label="总投资额(亿元)"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="projectLand"
          label="项目用地(亩)"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="constuctionContent"
          label="建设内容"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="projectStatement"
          label="项目诉求"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="expectedBenefit" label="预期效益" align="center" width="100">
        </el-table-column>
        <el-table-column
          prop="landedCase"
          label="已落地案例"
          width="65"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          label="项目联系人"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="distributionSituation"
          label="分发情况"
          align="center"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="projectAttachments"
          label="项目附件"
          align="center"
          width="110"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-download"
              @click="fileDown(scope.row.projectAttachments)"
              >附件下载</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="district14"
          label="操作"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" style="width: 80px;" @click="onRestore(scope.row)"
              >恢复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-bottom-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          background
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import topIcon from "@img/project/icon-lssj.png";
import pdfImg from "@img/project/icon-pdf.png";
import excelImg from "@img/project/icon-excel.png";
import {
  projectHistoryList,
  projectPushRestore,
  fileDownload,
} from "@api/projectManaApi";
import downFile from "@api/projectManaApi/download";

export default {
  name: "HistoryData",
  props: ["historyData"],
  data() {
    return {
      topIcon: topIcon,
      tableData: [],
      tableHeight: document.body.clientHeight - 340,
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10, // 每页
      pageNum: 0, // 当前
      tableRef: null,
      pdfImg: pdfImg,
      excelImg: excelImg,
    };
  },
  mounted() {
    this.initSize();
    this.initData();
    window.addEventListener("resize", this.initSize);
  },
  methods: {
    // 附件下载
    async fileDown(file) {
      if (file) {
        const res = await fileDownload(file);
        if (res.size > 0) {
          downFile.excel(res, "重点数据");
          this.$message.success("下载成功");
        } else {
          this.$message.warning("没有数据导出");
        }
      }
    },
    // 表头
    headerRowStyle() {
      return "color: #1C1C28;background:#E5E5E5";
    },
    // 尺寸设置
    initSize() {
      this.tableHeight = document.body.clientHeight - 340;
    },
    async initData() {
      this.loading = true;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      const res = await projectHistoryList(params);
      if (res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    onRestore(row) {
      this.$confirm("确定恢复该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await projectPushRestore(row.id);
          if (res.code === 200) {
            this.initData();
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 返回
    onBack() {
      this.$emit("handleBack");
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.initData();
    },
  },
};
</script>

<style scoped lang="less">
.history-page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.history-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  background: #f6f6f6;
  margin-bottom: 20px;
  padding: 0 20px;
}

.table-content {
  position: absolute;
  width: 100%;
}
</style>